<template>
	<view class="">
		<u-navbar title="服务预约" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="formbox">
			<u--form :model="form" ref="uForm" :errorType="['toast']" labelWidth="80">
				<view class="coreshop-flex">
					<image class="img" :src="form.projectImg || '../../static/images/logo/logo.png'" mode="aspectFit"></image>
					<view class="coreshop-flex coreshop-flex-direction coreshop-justify-between">
						<text>{{form.projectName}}</text>
						<view class="line-red">
							<text class="coreshop-font-10">￥</text>
							<text>{{form.projectPrice}}</text>
						</view>
					</view>
				</view>
				<u-form-item label="预约门店" prop="storeName" borderBottom
					@click="$u.route('/pages/member/merchant/storeList/storeList');">
					<u-input border="none" v-model="form.storeName" placeholder="请选择预约门店" disabledColor="#fff"
						inputAlign="right" disabled />
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="选择预约人" prop="staffName" borderBottom @click="$u.route('/pages/staff/list/list');">
					<u-input border="none" v-model="form.staffName" placeholder="请选择预约人(必选)" disabledColor="#fff"
						inputAlign="right" disabled />
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<view class="" v-if="timeRadios.length > 0">
					<u-tabs :list="dateList" lineColor="#303133" lineWidth="45" :itemStyle="{height: '54px'}"
						@change="onTabsChage">
						<view slot="right" style="padding-left: 4px;" @tap="isShowCalendar=true">
							<u-icon name="calendar" size="21" label="日期" labelPos="bottom" labelColor="#fa3534"
								color="#fa3534" bold></u-icon>
						</view>
					</u-tabs>
					<!-- 单选 -->
					<view class="tag-box">
						<view class="tag-item" v-for="(item, index) in timeRadios" :key="item.num"
							:class="item.used?(item.onc?'tag-active2':'tag-active'):''" @click="radioClick(index)">
							{{item.time}}
						</view>
					</view>
				</view>
				<u-form-item>
					<u-textarea v-model="form.remark" placeholder="在此可输入订单留言" />
				</u-form-item>
			</u--form>
		</view>
		<view class="bottom-button coreshop-flex coreshop-justify-end coreshop-align-center">
			<view class="c-m-r-10">
				<text>合计:</text>
				<text class="line-red">￥{{form.projectPrice}}</text>
			</view>
			<view>
				<u-button color="#e54d42" @click="submit" text="提交订单"></u-button>
			</view>
		</view>
		<u-calendar 
			:show="isShowCalendar" 
			mode="single" 
			color="#fa3534" 
			:minDate="minDate"
			@close="isShowCalendar=false" 
			@confirm="onConfirmDate">
		</u-calendar>
		<u-toast ref="uToast"></u-toast>
		<!-- 登录提示 -->
		<coreshop-login-modal :shareCode="shareCode"></coreshop-login-modal>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				shareCode:'',
				cIndex: 0,
				isShowCalendar: false,
				minDate: `${year}-${month}-${date}`,
				timeRadios: [],
				dateList: [],
				type:'consume', // consume划卡 purchase 购买
				form: {
					appointmentSpan: '',
					projectId: null,
					projectImg:'',
					projectName:'',
					projectPrice:'',
					staffName: '',
					storeId: 0,
					storeName: '',
					staffId: 0,
					remark: '',
					num: null,
					date: `${year}-${month}-${date}`,
				},
				rules: {
					storeName: [{
						required: true,
						message: '请选择预约门店',
						trigger: ['blur', 'change']
					}],
					staffName: [{
						required: true,
						message: '请选择预约人',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.type = opt.type
			this.getAppointmentDays()
			this.form.projectId = opt.projectId
			if(opt.shareCode){
				this.shareCode = opt.shareCode
			}
			if(opt.itemId){
				this.form.projectOrderItemId = opt.itemId
			}
			this.form.storeId = this.userStore.id
			this.form.storeName = this.userStore.name
			this.getDetail()
			uni.$on('staff', obj => {
				this.form.staffName = obj.nickName
				this.form.staffId = obj.id
				this.getTimeList()
			})
			uni.$on('store', obj => {
				this.form.storeName = obj.storeName
				this.form.storeId = obj.storeId
			})
		},
		computed: { ...mapState(['userStore']), },
		onUnload() {
			// 移除监听事件  
			uni.$off('staff')
			uni.$off('store')
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getDetail(){
				const that = this
				that.$u.api.ProjectGetDetial({id: that.form.projectId}).then(res=>{
					that.form.projectImg = res.data.image
					that.form.projectName = res.data.name
					that.form.projectPrice = res.data.price
				})
			},
			getAppointmentDays(date) {
				this.$u.api.AppointmentDays({ date: date || '' }).then(res => {
					if (res.data.list.length > 0) {
						this.dateList = res.data.list.map(im => {
							return {
								name: im.week,
								date: im.day
							}
						})
					}
				})
			},
			getTimeList(date) {
				this.$u.api.TimeList({
					projectId: this.form.projectId,
					storeId: this.form.storeId,
					staffId: this.form.staffId,
					date: date || this.minDate
				}).then(res => {
					this.timeRadios = res.data.list.map(im => {
						if (im.used) {
							im.onc = true
						} else {
							im.onc = false
						}
						return im
					})
				})
			},
			// 预约提交
			submit() {
				const that = this
				this.$refs.uForm.validate().then(res => {
					if (!uni.$u.test.isEmpty(this.form.num)) {
						if(this.type==="consume"){
							this.$u.api.ProjectDoCreate({ ...this.form }).then(res => {
								if (res.code === 0) {
									this.$refs.uToast.show({
										message: res.msg,
										complete() {
											uni.redirectTo({ url: '/pages/member/reservation/index' })
										}
									})
								}
							})
						}else if(this.type==="purchase"){
							this.$u.api.ProjectDoCreateOrder({
								storeId: this.form.storeId,
								orderType: 11,
								realAmout: this.form.projectPrice,
								remark: this.form.remark,
								items:[{
									itemId:this.form.projectId,
									nums: 1,
									price: this.form.projectPrice,
									staffId: this.form.staffId,
									appointmentTime: this.form.date,
									appointmentSpan: this.form.appointmentSpan
								}]
							}).then(res=>{
								that.$refs.uToast.show({
									message: res.msg,
									complete() {
										uni.$u.route('/pages/payment/pay/pay?orderId=' + res.data + '&type=' + that.$globalConstVars.paymentType.projectOrder)
									}
								})
							})
						}
					} else {
						uni.$u.toast('请选择预约时段')
					}
				})
			},
			// 点击tabs事件
			onTabsChage(item) {
				if (this.cIndex !== item.index) {
					this.cIndex = item.index
					this.getTimeList(item.date)
					this.form.num = null
					this.form.date = item.date
				}
			},
			// 单选预约时间
			radioClick(ix) {
				console.log('sds', ix)
				if (this.timeRadios[ix].onc) return
				this.timeRadios.map((item, index) => {
					item.used = index === ix ? true : false
					if (item.onc) {
						item.used = true
					}
				})
				this.form.num = this.timeRadios[ix].num
				this.form.appointmentSpan = this.timeRadios[ix].time
			},
			// 选择时间
			onConfirmDate(e) {
				this.isShowCalendar = false
				this.getAppointmentDays(e[0])
				this.getTimeList(e[0])
				this.form.date = e[0]
				this.form.num = null
			},
		}
	}
</script>

<style lang="scss">
	.formbox {
		width: 710rpx;
		padding: 20rpx;
		margin: 10rpx auto;
		background-color: #fff;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.ubtn {
		padding: 0 40rpx;
		margin-top: 40rpx;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}


	.tag-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-top: 20rpx;
		font-size: 14px;
		border-top: 1px #d6d7d9 solid;

		&::after {
			content: "";
			display: block;
			flex: 1;
			/* 与flex: auto;等效都是自适应剩余空间*/
		}

		// justify-content: space-around;
		.tag-item {
			border: 1px #d6d7d9 solid;
			text-align: center;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			margin-right: 12rpx;
		}

		.tag-active {
			border-color: #fa3534;
			color: #fa3534;
		}

		.tag-active2 {
			background-color: #d6d7d9;
			color: #999;
		}
	}
</style>
